<template>
	<view class="opinoon">
		<view class="header">
			
		</view>
		<view class="uploadArea">
			<textarea class="opinion-content" v-model="opinionContent" placeholder="请输入意见反馈" maxlength="30"
				@input="handleSize" required>
				
		   </textarea>
		   <view class="tishi">
		   	已输入{{num}}/30个字
		   </view>
			<input type="text" class="iph-email-qq" v-model="iphemailqq" placeholder="手机/邮箱/QQ(选填)">
			<view class="upload">
				<view class="text">
					上传图片(最多6张)
				</view>
				<view class="imgs">
					<view class="upLoadImg" >
						<view class="imgsbox" v-for="item in imgs">
							<image class="imgsOne LoadImg" :src="item"></image>
						</view>
						<image class="LoadImg" v-if="isFlag" src="https://wlsy.nanjingyunpeng.cn/weixin/image/upLoadImgs.png" @click="upload"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="sub">
			<button class="btn" @click="$u.debounce(subfeedback, 500)">
				提交
			</button>
		</view>
		<view class="footer">
			<image class="footerimg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/footerImg.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		feedback
	} from "../../api/api.js"
	export default {
		data() {
			return {
				opinionContent: '',
				iphemailqq: '',
				imgs:[],
				num:0,
				isFlag:true

			}
		},
		methods: {
			handleSize() {
				this.num = this.opinionContent.length
				if (this.opinionContent.length == 30) {
					uni.showToast({
						title: '最多可输入30个文字！',
						duration: 2000,
						icon: "none",
					});
				}
			},
             
			upload() {
				
					uni.chooseImage({
						count: 6, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							// console.log("tempFilePaths",tempFilePaths)
							 for(let i = 0;i < tempFilePaths.length; i++) {
							        	uni.uploadFile({
								            url: 'https://wlsy.nanjingyunpeng.cn/api/login/upload', //仅为示例，非真实的接口地址
								            filePath: tempFilePaths[i],
								            name: 'file',
								            formData: {
								                'user': 'test'
								            },
								            success: (uploadFileRes) => {
								                // console.log(uploadFileRes.data);
												this.imgs.push(JSON.parse(uploadFileRes.data).data)
												// console.log(this.imgs)
												if(this.imgs.length==6){
													this.isFlag = false
													uni.showToast({
														title: '最多可上传6张图片！',
														duration: 4000,
														icon: "none",
													});
												}
								            }
								        });
							        }
						}
					});
				
				
			},
			
			//提交
		  async	subfeedback(){
				// console.log("eeeeee",this.opinionContent,this.iphemailqq)
				let data = {
					describe:this.opinionContent,
					tel:this.iphemailqq,
					imgs:JSON.stringify(this.imgs)
				}
				let res = await feedback(data)
				// console.log("yijian",res)
				if(res.code ==1000){
					this.opinionContent="",
					this.iphemailqq="",
					this.imgs = []
					uni.showToast({
						title: '反馈成功',
						duration: 2000,
						icon: "none",
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/center/SystemSettings',
							  success(){
									 let page = getCurrentPages().pop();  //跳转页面成功之后
							             if (!page) return;  
							             page.onLoad(); //如果页面存在，则重新刷新页面
								  }
						});
					}, 1000)
					
					
				}
			}


		},

	}
</script>

<style scoped lang="scss">
	.opinoon {
		min-width: 100%;
		min-height: 100%;
		background-color: #EEF7FE;
		padding: 30rpx;
		padding-top: 70rpx;
		box-sizing: border-box;
		position: relative;
		.tishi{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;
			position: absolute;
			right: 50rpx;
			top: 340rpx;
		}
		.header{
			width: 750rpx;
			height: 40rpx;
			background:#466EE7 ;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: fixed;
			top: 0;
			left: 0;
		}
		.uploadArea{
			z-index: 99;
			
		}

		.opinion-content {
			width: 690rpx;
			height: 320rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 8rpx 0px rgba(51, 51, 51, 0.05);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding: 20rpx;
			box-sizing: border-box;
			
		}

		.iph-email-qq {
			width: 690rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 8rpx 0px rgba(51, 51, 51, 0.05);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			margin-top: 30rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
		}

		.upload {
			margin-top: 20rpx;
            .imgsbox{
				display: inline-block;
			}
			.text {
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 38rpx;
			}

			.imgs {
				width: 690rpx;
				// height: 406rpx;
				// background-color: pink;
				margin-top: 30rpx;
			}
			.LoadImg{
				width: 216rpx;
				height: 216rpx;
				display: inline-block;
				margin-left: 10rpx;
			}
            
		}

		.sub {
              position: absolute;
			  bottom: 70rpx;
			.btn {
				width: 690rpx;
				height: 88rpx;
				background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 88rpx;
				z-index: 99;
			}
		}
		.footer {
			width: 750rpx;
			height: 324rpx;
			position: fixed;
			bottom: 0;
			left: 0;
		
			.footerimg {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>
